<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<head>
    <title>用户登录</title>
</head>
<body>
<h2 style="color:red">${requestScope.error}</h2>
<form action="${pageContext.request.contextPath}/login" method="post">

    <input id="u1" type="text" name="name" placeholder="请输入用户名"><br/>
    <input id="p1" type="password" name="password" placeholder="请输入密码"><br/>
    <input id="code" type="password" name="code" placeholder="请输入验证码"><br/>
    <img src="${pageContext.request.contextPath}/captcha" alt="验证码" id="captcha"><br/>
    <input type="submit" value="登录">
</form><br>
<button id="bt1" onclick="sendAjax()">发送JSON数据</button>
</body>

<script>
    $(function () {
        var src = $("#captcha").attr("src");
        $("#captcha").click(function () {
            // 验证码地址后拼接参数作用：防止浏览器缓存图片
            $(this).attr("src", src+"?v=", new Date().getTime());
        });
    });


    //点击 submit 发送ajax
    function sendAjax() {
        // 发送ajax请求
        var user = {name: "admin", password: "123"};
        $.ajax({
            url: "http://localhost:8080/login",
            contentType: "application/json",
            type: "post",
            data: JSON.stringify(user),
            success: function (result) {
                console.log(result);
                alert(result);
            }
        });
    }




    // 绑定input输入框参数发起ajax请求
    // $(document).ready(function() {
    //     $("#bt1").click(function() {
    //         $.ajax({
    //             type: "get",
    //             url: "http://localhost:8080/fast/t1",
    //             data: {
    //                 username: $("#u1").val(),
    //                 password: $("#p1").val()
    //             },
    //             success: function(res) {
    //                 console.log(res)
    //             }
    //         });
    //     });
    // });
    //


    //绑定input输入框参数发起axios请求
    // $(document).ready(function(){
    //     $("button").click(function(){
    //         var paramsObj = { username: $("#u1").val(), password: $("#p1").val()}
    //         axios({
    //             method:"GET",
    //             url:"http://localhost:8080/json/t2",
    //             contentType: "application/json;charset=utf-8",
    //             params: paramsObj
    //         }).then(function (res){
    //             console.log(res.data)
    //         })
    //     });
    // });
</script>
</html>